<!doctype html>
<html class="no-js" lang="zxx">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <script src="../static/js/echarts.min.js"></script>
        <script src="../static/js/china.js"></script>
        <script src="../static/js/jquery-1.12.4.min.js"></script>



        <title>电商交易数据可视化</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- Place favicon.ico in the root directory -->
        

        <!-- All css here -->
        <link rel="stylesheet" href="../static/css/bootstrap.min.css">
        <link rel="stylesheet" href="../static/css/fontawesome-all.min.css">
        <link rel="stylesheet" href="../static/css/animate.css">
        <link rel="stylesheet" href="../static/css/slick.css">
        <link rel="stylesheet" href="../static/css/meanmenu.css">
        <link rel="stylesheet" href="../static/css/default.css">
        <link rel="stylesheet" href="../static/css/style.css">
        <link rel="stylesheet" href="../static/css/responsive.css">

        <style>
        .example-div {
            width: 1300px;
            height: 1300px;
            top: -260px;
            bottom: 0;
            right: -60px;
        }
        </style>

    </head>
    <body>
        <!--[if lte IE 9]>
            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="/">upgrade your browser</a> to improve your experience and security.</p>
        <![endif]-->
        <!--  ====== preloader=============================================  -->
        <div id="preloader">
            <div id="loading">
                <div id="loading-center">
                    <div id="loading-center-absolute">
                    <div class="object" id="object_one"></div>
                    <div class="object" id="object_two"></div>
                    <div class="object" id="object_three"></div>
                    <div class="object" id="object_four"></div>
                    <div class="object" id="object_five"></div>
                    <div class="object" id="object_six"></div>
                    <div class="object" id="object_seven"></div>
                    <div class="object" id="object_eight"></div>
                    
                    </div>
                </div>
            </div>
        </div><!-- /preloader -->

        <!--  ====== header-area-start=======================================  -->
        <header>
            <div id="header-sticky" class="transparent-header header-area">
                <div class="header header5">
                    <div class="container">
                        <div class="row align-items-center justify-content-between">
                            <div class="col-xl-3 col-lg-2 col-md-3 col-sm-3 col-4">
                                <div class="logo d-inline-block">
                                    <a href="/home"><h1 class="text-white wow fadeIn f-700 pb-15 transition-3" style="margin-left: -300px">电商交易数据可视化</h1></a>

                                </div>
                            </div><!-- /col -->
                            <div class="col-xl-8 col-lg-9 col-md-8 col-sm-8 col-8 d-flex justify-content-end" style="margin-right: -400px">
                               <div class="main-menu">
                                   <nav id="mobile-menu">
                                        <ul class="d-block">
                                            <li>
                                                <a class="active text-white" href="/home">首 页</a>
                                            </li>
                                            <li>
                                                <a class="text-white" href="/rata">男女比例</a>
                                            </li>
                                            <li>
                                                <a class="text-white" href="/action">消费行为</a>
                                            </li>
                                            <li>
                                                <a class="text-white" href="/age">年龄数据</a>
                                            </li>
                                            <li>
                                                <a class="text-white" href="/item">热门商品词云</a>
                                            </li>
                                            <li>
                                                <a class="text-white" href="/province">各省份消费数据</a>
                                            </li>
                                             <li>
                                                <a class="text-white" href="/recall">回头客预测</a>
                                            </li>
                                        </ul>
                                   </nav>
                               </div><!-- /main-menu -->

                            </div><!-- /col -->
                        </div><!-- /row -->
                    </div><!-- /container -->
                </div>
            </div><!-- /header-bottom -->
        </header>
        <!--  header-area-end  -->


        <!--  ====== header extra info start================================== -->
            <!-- side-mobile-menu start -->
            <div class="side-mobile-menu bg-white pt-50  pb-30 pl-30 pr-30">
                <div class="close-icon float-right pt-10 mb-20">
                    <a href="javascript:void(0);"><span class="icon-clear theme-color"><i class="fa fa-times"></i></span></a>
                </div>
                <div class="mobile-menu"></div>

                <ul class="social-link text-center text-md-right pt-50 pb-50 clear-both">
                    <li class="d-inline-block">
                        <a class="facebook-color text-center pl-15 d-inline-block transition-3" href="/"><i class="fab fa-facebook-f"></i></a>
                    </li>
                    <li class="d-inline-block">
                        <a class="twitter-color text-center pl-15 d-inline-block transition-3" href="/"><i class="fab fa-twitter"></i></a>
                    </li>
                    <li class="d-inline-block">
                        <a class="google-plus-color text-center pl-15 d-inline-block transition-3" href="/"><i class="fab fa-google-plus-g"></i></a>
                    </li>
                    <li class="d-inline-block">
                        <a class="linkedin-color text-center pl-15 d-inline-block transition-3" href="/"><i class="fab fa-linkedin-in"></i></a>
                    </li>
                </ul><!-- social-link -->
            </div><!-- /side-mobile-menu -->
            <div class="body-overlay"></div>
        <!-- header extra info end  -->
   

        <main>
            <!-- ====== feature-area-start=========================================== -->
            <div class="feature-area feature-area2 pb-90 over-hidden" style="background-color: white">
                <div class="container">
                    <div class="row "style="margin-right: -700px">
                        <div class="col-xl-6  col-lg-7  col-md-12  col-sm-12 col-12" style="margin-top: 100px">
                            <div class="service-content mt-70 mb-25" style="margin-left: -200px">
                                <div class="title">
                                    <span class="sub-heading d-block f-700 theme-color">Province</span>
                                    <h4 class="f-700 mb-40">省份消费数据</h4>
                                </div><!-- /title -->

                                <div class="about-content mt-35 b-50 pt-10 wow wow fadeInLeft" data-wow-duration="2.6s">
                                                    <div id="example" class="example-div" >
                                                        <script type="text/javascript">

                                                            var data = {{ canshu | tojson }};

                                                            var shanghai = data.find(item => item[0] === '上海市')[1];
                                                            var yunnan = data.find(item => item[0] === '云南')[1];
                                                            var neimenggu = data.find(item => item[0] === '内蒙古')[1];
                                                            var beijing = data.find(item => item[0] === '北京市')[1];
                                                            var nanshazhudao = data.find(item => item[0] === '南沙诸岛')[1];
                                                            var taiwan = data.find(item => item[0] === '台湾')[1];
                                                            var jilin = data.find(item => item[0] === '吉林')[1];
                                                            var sichuan = data.find(item => item[0] === '四川')[1];
                                                            var tianjin = data.find(item => item[0] === '天津市')[1];
                                                            var ningxia = data.find(item => item[0] === '宁夏')[1];
                                                            var anhui = data.find(item => item[0] === '安徽')[1];
                                                            var shandong = data.find(item => item[0] === '山东')[1];
                                                            var shanxi = data.find(item => item[0] === '山西')[1];
                                                            var guangdong = data.find(item => item[0] === '广东')[1];
                                                            var guangxi = data.find(item => item[0] === '广西')[1];
                                                            var xinjiang = data.find(item => item[0] === '新疆')[1];
                                                            var jiangsu = data.find(item => item[0] === '江苏')[1];
                                                            var jiangxi = data.find(item => item[0] === '江西')[1];
                                                            var hebei = data.find(item => item[0] === '河北')[1];
                                                            var henan = data.find(item => item[0] === '河南')[1];
                                                            var zhejiang = data.find(item => item[0] === '浙江')[1];
                                                            var hainan = data.find(item => item[0] === '海南')[1];
                                                            var hubei = data.find(item => item[0] === '湖北')[1];
                                                            var hunan = data.find(item => item[0] === '湖南')[1];
                                                            var gansu = data.find(item => item[0] === '甘肃')[1];
                                                            var fujian = data.find(item => item[0] === '福建')[1];
                                                            var xizang = data.find(item => item[0] === '西藏')[1];
                                                            var guizhou = data.find(item => item[0] === '贵州')[1];
                                                            var liaoning = data.find(item => item[0] === '辽宁')[1];
                                                            var chongqing = data.find(item => item[0] === '重庆市')[1];
                                                            var xiaxi = data.find(item => item[0] === '陕西')[1];
                                                            var qinghai = data.find(item => item[0] === '青海')[1];
                                                            var heilongjiang = data.find(item => item[0] === '黑龙江')[1];
                                                            var xianggang = data.find(item => item[0] === '香港')[1];
                                                            var aomin = data.find(item => item[0] === '澳门')[1];




                                                            var dataList=[
                                                                {name:"南海诸岛",value:nanshazhudao},
                                                                {name: '北京', value: beijing},
                                                                {name: '天津', value: tianjin},
                                                                {name: '上海', value: shanghai},
                                                                {name: '重庆', value: chongqing},
                                                                {name: '河北', value: hebei},
                                                                {name: '河南', value: henan},
                                                                {name: '云南', value: yunnan},
                                                                {name: '辽宁', value: liaoning},
                                                                {name: '黑龙江', value: heilongjiang},
                                                                {name: '湖南', value: hunan},
                                                                {name: '安徽', value: anhui},
                                                                {name: '山东', value: shandong},
                                                                {name: '新疆', value: xinjiang},
                                                                {name: '江苏', value: jiangsu},
                                                                {name: '浙江', value: zhejiang},
                                                                {name: '江西', value: jiangxi},
                                                                {name: '湖北', value: hubei},
                                                                {name: '广西', value: guangxi},
                                                                {name: '甘肃', value: gansu},
                                                                {name: '山西', value: shanxi},
                                                                {name: '内蒙古', value: neimenggu},
                                                                {name: '陕西', value: xiaxi},
                                                                {name: '吉林', value: jilin},
                                                                {name: '福建', value: fujian},
                                                                {name: '贵州', value: guizhou},
                                                                {name: '广东', value: guangdong},
                                                                {name: '青海', value: qinghai},
                                                                {name: '西藏', value: xizang},
                                                                {name: '四川', value: sichuan},
                                                                {name: '宁夏', value: ningxia},
                                                                {name: '海南', value: hainan},
                                                                {name: '台湾', value: taiwan},
                                                                {name: '香港', value: xianggang},
                                                                {name: '澳门', value: aomin}
                                                            ]
                                                            var myChart = echarts.init(document.getElementById('example'));
                                                            function randomValue() {
                                                                return Math.round(Math.random()*1000);
                                                            }
                                                            option = {
                                                                tooltip: {
                                                                        formatter:function(params,ticket, callback){
                                                                            return params.name+'<br />'+params.seriesName+'：'+params.value
                                                                        }//数据格式化
                                                                    },
                                                                visualMap: {
                                                                    min: 100,
                                                                    max: 8000,
                                                                    left: 'left',
                                                                    top: 'center',
                                                                    text: ['高','低'],//取值范围的文字
                                                                    inRange: {
                                                                        color: ['#e0ffff', '#037af3']//取值范围的颜色
                                                                    },
                                                                    show:true//图注
                                                                },
                                                                geo: {
                                                                    map: 'china',
                                                                    {#roam: false,//不开启缩放和平移#}
                                                                    {#zoom:0.23,//视角缩放比例#}
                                                                    label: {
                                                                        normal: {
                                                                            show: true,
                                                                            fontSize:'12',
                                                                            color: 'rgba(0,0,0,0.7)'
                                                                        }
                                                                    },
                                                                    itemStyle: {
                                                                        normal:{
                                                                            borderColor: 'rgba(0, 0, 0, 0.2)'
                                                                        },
                                                                        emphasis:{
                                                                            areaColor: '#7a74d5',//鼠标选择区域颜色
                                                                            shadowOffsetX: 5,
                                                                            shadowOffsetY: 5,
                                                                            shadowBlur: 20,
                                                                            borderWidth: 5,
                                                                        }
                                                                    }
                                                                },
                                                                series : [
                                                                    {
                                                                        name: '交易热度',
                                                                        type: 'map',
                                                                        geoIndex: 0,
                                                                        data:dataList
                                                                    }
                                                                ]
                                                            };
                                                            myChart.setOption(option);

                                                          /*  setTimeout(function () {
                                                                myChart.setOption({
                                                                    series : [
                                                                        {
                                                                            name: '信息量',
                                                                            type: 'map',
                                                                            geoIndex: 0,
                                                                            data:dataList
                                                                        }
                                                                    ]
                                                                });
                                                            },1000)*/
                                                            option && myChart.setOption(option);
                                                        </script>
                                </div>

                            </div><!-- /about-content -->



                            </div><!-- /service-content -->
                        </div><!-- /col -->
                        <div class="col-xl-1 offset-xl-1 col-lg-5 offset-lg-0 col-md-10 offset-md-1  col-sm-12 col-12 pl-xl-0" style="margin-top: 300px">
                            <div class="service-img mb-55 pt-60 wow fadeInRight" data-wow-duration="1.6s">
                                <img class=" bounce-animate" src="../static/picture/feature2-img.png" alt="">
                            </div><!-- /service-img -->
                        </div><!-- /col -->
                    </div><!-- /row -->
                </div><!-- /container -->
            </div>
            <!-- feature-area-end -->

        </main>


        <!-- All js here -->
        <script src="../static/js/modernizr-3.5.0.min.js"></script>
        <script src="../static/js/jquery-1.12.4.min.js"></script>
        <script src="../static/js/popper.min.js"></script>
        <script src="../static/js/bootstrap.min.js"></script>
        <script src="../static/js/one-page-nav-min.js"></script>
        <script src="../static/js/slick.min.js"></script>
        <script src="../static/js/wow.min.js"></script>
        <script src="../static/js/plugins.js"></script>
        <script src="../static/js/jquery.meanmenu.min.js"></script>
        <script src="../static/js/main.js"></script>
    	
</body>
</html>